<template>
  <el-card class="box-card">
    <div class="search-bar">
      <el-form :inline='true' :model='searchData' class="fl">
        <el-input style="display: none;"></el-input>
        <el-form-item label="用户名">
          <el-input v-model="searchData.loginName" placeholder="用户名" @keyup.enter.native="onSearch()"></el-input>
        </el-form-item>
      </el-form>
      <div class="fl">
        <el-button type="text" @click="handleReset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
      </div>
    </div>
    <div class="tools-bar">
      <el-button type="success" icon="el-icon-plus" size="small" @click="formVif=true;title='新增用户'">新增用户</el-button>
    </div>
    <div>
      <el-table v-loading.body="tableLoading" ref="singleTable" :data="tableData" border highlight-current-row style="width: 100%">
        <el-table-column prop="id" width="80" label="用户id"></el-table-column>
        <el-table-column prop="user_name" label="用户名" min-width="120">
        </el-table-column>
        <el-table-column prop="work_number" min-width="210" label="工号">
        </el-table-column>
        <el-table-column prop="permissions" min-width="210" label="权限">
        </el-table-column>
        <el-table-column prop="sex" :formatter="sexRule" min-width="210" label="性别">
        </el-table-column>
        <el-table-column prop="phone_number" min-width="210" label="手机号">
        </el-table-column>
        <el-table-column prop="create_time" min-width="210" label="创建时间">
        </el-table-column>
        <el-table-column  min-width="280" label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="small" @click="title='修改用户';id=scope.row.id;
            addForm=scope.row;
            formVif=true" icon="el-icon-edit">修改</el-button>
            <el-button type="danger" size="small" @click="title='删除用户';id=scope.row.id;showModal('是否确认删除')" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-bar">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 25, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRecord">
      </el-pagination>
    </div>
<!--    弹出窗口 -->
    <el-dialog :title="title" :visible.sync="formVif"  @close="closeDialogAddgsVisible" class="hs-form">
      <el-form  :model="addForm" ref="addForm" label-width="100px">
        <el-row>
          <el-col >
            <el-form-item label="用户名" :label-width="formLabelWidth" class="hs-form-item">
              <el-input v-model="addForm.user_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="工号" :label-width="formLabelWidth">
              <el-input v-model="addForm.work_number" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="密码" :label-with="formLabelWidth">
              <el-input v-model="addForm.password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col >
            <el-form-item label="权限" :label-width="formLabelWidth">
              <el-select v-model="addForm.permissions" >
                <el-option value="普通用户" label="普通用户"></el-option>
                <el-option value="管理员" label="管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="addForm.sex" >
                    <el-option :value=0 label="男"></el-option>
                    <el-option :value=1 label="女"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col >
            <el-form-item label="手机号" :label-width="formLabelWidth">
              <el-input v-model="addForm.phone_number" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="postData">保存</el-button>
        <el-button @click="formVif=false">取消</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
export default {
  data () {
    return {
        id: null,
        title: '',
        formLabelWidth: '',
        addForm: {
            id:'',
            user_name: '',
            work_number: '',
            permissions: "普通用户",
            sex: 0,
            phone_number: '',
            create_time: new Date,
            password:'',
        },
        formVif: false,
        currentPage: 1,
        totalRecord: 0,
        pageSize: 10,
        tableLoading: false,
        searchData: {
            loginName: ''
        },
        tableData: []
    }
  },
  created () {
    this.api.user.getList({
      'page':this.currentPage,
      'page_size':this.pageSize, 
      'user_name': ''
    }).then((res) => {
      this.tableData = res.data.data
      this.totalRecord = res.data.count
    })
  },
  methods: {
      showModal(msg) {
          this.$confirm(msg, '确认删除', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              this.postData()
              this.$message({
                  type: 'success',
                  message: '删除成功!'
              });
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消删除'
              });
          });
      },
      postData(){
          if (this.title == '新增用户') {
            //  this.addForm.id ++
            this.api.user.userAdd(this.addForm).then((res) => {
                  this.api.user.search({ page_size: this.pageSize, page: this.currentPage, user_name: this.searchData.loginName }).then((res) => {
                    this.tableData = res.data.data
                    this.totalRecord = res.data.count
                  })
                  this.formVif = false
              })
          }
          else if (this.title == '修改用户') {
              this.addForm.id = this.id
              this.formVif = true
            this.api.user.userModify(this.addForm).then((res) => {
                  this.api.user.search({ page_size: this.pageSize, page: this.currentPage, user_name: this.searchData.loginName }).then((res) => {
                    this.tableData = res.data.data
                    this.totalRecord = res.data.count
                  })
                  this.formVif = false
              })
          } else if (this.title == '删除用户') {
              this.api.user.userDelete({id: this.id}).then((res) => {
                  this.api.user.search({ page_size: this.pageSize, page: this.currentPage, user_name: this.searchData.loginName }).then((res) => {
                    this.tableData = res.data.data
                    this.totalRecord = res.data.count
                  })
                  this.formVif = false
              })
          }

      },
    closeDialogAddgsVisible: function () {

    },
    onSearch () {
      this.api.user.search({ page_size: this.pageSize, page: this.currentPage, user_name: this.searchData.loginName }).then((res) => {
        this.tableData = res.data.data
        this.totalRecord = res.data.count
      })
    },
    handleReset () {
      this.searchData = {
        loginName: ''
      }
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.onSearch ()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.onSearch ()
    },
    sexRule (row, column) {
      return row.sex == 0 ? '男' : row.sex == 1 ? '女' : '未知'
    }
  }
}
</script>
<style lang="less">
  .fr {
    float: right;
  }
  .fl {
    float: left;
  }
  .search-bar {
    overflow: hidden;
  }
</style>

<style>
.tools-bar {
  margin-bottom: 20px;
}
</style>
